<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont icon-zuojiantou"></span>
    </div>
    <div class="header-input"><span class="iconfont icon-sousuo"></span>
      <input type="text" placeholder="搜索更多">
    </div>
    <router-link to="/city">
    <div class="header-right">{{this.$store.state.city}} <span class="iconfont icon-xiajiantou"></span></div>
    </router-link>
  </div>
</template>

<script>

    export default {
        name: "Header",
        props:{
          city:String
        }
    }
</script>

<style lang="stylus" scoped>
  .header{
    width 100%;
    height .45rem;
    background: #00bcd4;
    display flex;
    align-items center;
    color: #ffffff;
    font-size:.14rem
  }
  .header-left{
    margin:0 .06rem;
  }
  .header-input{
    flex:1;
    height:.3rem;
    background:#ffffff;
    border-radius :.06rem;
    color: #cacaca;
    line-height :.26rem;
  }
  .header-input span{
    display:inline-block;
    margin-left :5px;
    font-size:.14rem;
    vertical-align middle;
  }
  .header-right{
    margin :0 .06rem;
    color :white;
  }
</style>
